<!--
* @description:货主合同管理
* @fileName: OwnerContractManagement
* @author:石锦涛
* @date:2022-01-07
* @后台人员:石锦涛
-->
<template>
  <div>
    <div>
      <el-row :span="1">
        <el-col :span="1">合同标题:</el-col>
        <el-col :span="3"><input v-model="telets" /></el-col>
        <el-col :span="1">货主单位:</el-col>
        <el-col :span="3"><input v-model="danwei" /></el-col>
        <el-col :span="1.5">货主负责人:</el-col>
        <el-col :span="3"><input v-model="principal" /></el-col>
      </el-row>
      <el-row :span="1">
        <el-col :span="1">经办人:</el-col>
        <el-col :span="3"><input v-model="operators" /></el-col>
        <el-col :span="1">签订时间:</el-col>
        <el-col :span="3"><input type="Date" v-model="dtime" /></el-col>
        <el-col :span="1">审批状态:</el-col>
        <el-col :span="3">
          <el-select v-model="state" placeholder="请选择">
            <el-option
              v-for="item in optionsc"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1"><button @click="showNewow()">查询</button></el-col>
        <el-col :span="1"><button @click="chongzhi()">重置</button></el-col>
      </el-row>
      <el-row :span="1">
        <el-col :span="1"
          ><el-button @click="addpust()">新增</el-button></el-col
        >
        <el-col :span="3"
          ><el-button @click="deleteMores()">删除</el-button></el-col
        >
      </el-row>
    </div>
    <!-- 货主合同管理 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="TheShipContractNO" label="合同编号" width="200">
      </el-table-column>
      <el-table-column prop="TheContractTitle" label="合同标题" width="100">
      </el-table-column>
      <el-table-column prop="TheOwnerUnit" label="货主单位" width="100">
      </el-table-column>
      <el-table-column prop="FreightPrincipal" label="货主负责人" width="100">
      </el-table-column>
      <el-table-column prop="LineName" label="线路" width="100"> </el-table-column>
      <el-table-column prop="TonsOfFreight" label="吨运价" width="100">
      </el-table-column>
      <el-table-column prop="ConditionTonnage" label="包车条件吨价" width="110">
      </el-table-column>
      <el-table-column prop="CharterValue" label="包车金额" width="100">
      </el-table-column>
      <el-table-column prop="SignedTimes" label="签订日期" width="100">
      </el-table-column>
      <el-table-column prop="Agent" label="经办人" width="100">
      </el-table-column>
      <el-table-column prop="ContractStates" label="状态" width="100">
        <template slot-scope="scope">
          {{ scope.row.ContractStates ? "已通过" : "未通过" }}
        </template>
      </el-table-column>
      <el-table-column prop="TheApprover" label="审批人" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a href="#" @click="Bianji(scope.row)">编辑</a> &nbsp;
          <a href="#" @click="deletesc(scope.row)">删除</a>&nbsp;
          <a href="#" @click="Looks(scope.row)">查看</a>&nbsp;
          <a href="#" @click="Shenpi(scope.row)">提交审批</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
    <!--查看信息-->
    <div>
      <el-dialog title="查看信息" :visible.sync="dialogFormVisible">
        <div slot="footer" class="dialog-footer">
          <el-row :span="1">
            <el-col :span="3">合同标题:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheContractTitle"></el-input
            ></el-col>
            <el-col :span="3">货主单位:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheOwnerUnit"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">货主负责人:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.FreightPrincipal"></el-input
            ></el-col>
            <el-col :span="3">线路:</el-col>
            <el-col :span="7">
              <el-select v-model="jieshu.Line" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.LineName"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">吨运价:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TonsOfFreight"></el-input
            ></el-col>
            <el-col :span="3">包车条件吨位:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.ConditionTonnage"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">包车金额:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.CharterValue"></el-input
            ></el-col>
            <el-col :span="3">经办人:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.Agent"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">签订时间:</el-col>
            <el-col :span="7"
              ><el-input type="date" v-model="jieshu.SignedTimes"></el-input
            ></el-col>
            <el-col :span="3">合同金额:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheContractAmount"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">合同标的或项目说明:</el-col>
            <el-col :span="12"
              ><el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="jieshu.ProjectDescriptio"
              >
              </el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">合同主要条款/变更条款:</el-col>
            <el-col :span="12"
              ><el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="jieshu.ChangeTheTerms"
              >
              </el-input
            ></el-col>
          </el-row>
          <el-button @click="quxiao()">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!--编辑-->
    <div>
      <el-dialog title="修改信息" :visible.sync="dialogFormVisible1">
        <div slot="footer" class="dialog-footer">
          <el-row :span="1">
            <el-col :span="3">合同标题:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheContractTitle"></el-input
            ></el-col>
            <el-col :span="3">货主单位:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheOwnerUnit"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">货主负责人:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.FreightPrincipal"></el-input
            ></el-col>
            <el-col :span="3">线路:</el-col>
            <el-col :span="7">
              <el-select v-model="jieshu.Line" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.LineName"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">吨运价:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TonsOfFreight"></el-input
            ></el-col>
            <el-col :span="3">包车条件吨位:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.ConditionTonnage"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">包车金额:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.CharterValue"></el-input
            ></el-col>
            <el-col :span="3">经办人:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.Agent"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">签订时间:</el-col>
            <el-col :span="7"
              ><el-input type="date" v-model="jieshu.SignedTimes"></el-input
            ></el-col>
            <el-col :span="3">合同金额:</el-col>
            <el-col :span="7"
              ><el-input v-model="jieshu.TheContractAmount"></el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">合同标的或项目说明:</el-col>
            <el-col :span="12"
              ><el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="jieshu.ProjectDescriptio"
              >
              </el-input
            ></el-col>
          </el-row>
          <br />
          <el-row :span="1">
            <el-col :span="3">合同主要条款/变更条款:</el-col>
            <el-col :span="12"
              ><el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="jieshu.ChangeTheTerms"
              >
              </el-input
            ></el-col>
          </el-row>
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="updateshuju">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      telets: "",
      danwei: "",
      principal: "",
      operators: "",
      dtime: "",
      state: "",
      totalCount: 0,
      pageindex: 1,
      pagesize: 5,

      dialogFormVisible: false,
      dialogFormVisible1: false,

      jieshu: {
        Id: "",
        TheShipContractNO: "",
        TheContractTitle: "",
        TheOwnerUnit: "",
        FreightPrincipal: "",
        Line: "",
        TonsOfFreight: "",
        ConditionTonnage: "",
        CharterValue: "",
        Agent: "",
        SignedTime: "",
        TheContractAmount: "",
        ProjectDescriptio: "",
        ChangeTheTerms: "",
        ContractTheText: "",
        ContractStates: "",
        TheApprover: "",
        IsDelete: "",
        AbnormityWarning:"",
        FreightState:"",
      },
      options: [],
      ids: [],
      optionsc: [
        {
          value: "0",
          label: "待提交",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "3",
          label: "已拒绝",
        },
      ],
      value: "",
    };
  },
  methods: {
    //多选
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let index = 0; index < val.length; index++) {
        this.ids.push(val[index].GId);
      }
    },
    //分页
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.showNewow();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.showNewow();
    },
    //显示数据
    showNewow() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/new-owner-app/new-owners?telet=" +
            this.telets +
            "&danwei=" +
            this.danwei +
            "&principal=" +
            this.principal +
            "&operators=" +
            this.operators +
            "&dtime=" +
            this.dtime +
            "&state=" +
            this.state +
            "&pageindex=" +
            this.pageindex +
            "&pagesize=" +
            this.pagesize +
            ""
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalCount = res.data.PageTotal;
        });
    },
    //重置
    chongzhi() {
      (this.telets = ""),
        (this.danwei = ""),
        (this.principal = ""),
        (this.operators = ""),
        (this.dtime = ""),
        (this.state = "");
      this.showNewow();
    },
    //删除
    deletesc(row) {
      if (confirm("是否确定删除")) {
        this.$axios
          .delete(
            "https://localhost:44399/api/app/new-owner-app/page-delet/" +
              row.GId +
              ""
          )
          .then((res) => {
            if (res.data.Code > 0) {
              alert("删除成功");
              this.showNewow();
            } else {
              alert("删除失败");
              this.showNewow();
            }
          });
      }
    },
    //显示线路
    xianlu() {
      this.$axios
        .get("https://localhost:44399/api/app/line-app/page")
        .then((res) => {
          this.options = res.data;
        });
    },
    //显示查看
    Looks(row) {
      this.jieshu = row;
      this.dialogFormVisible = true;
    },
    //编辑
    Bianji(row) {
      this.jieshu = row;
      this.dialogFormVisible1 = true;
    },
    //编辑数据保存
    updateshuju() {
      this.$axios
        .put(
          "https://localhost:44399/api/app/new-owner-app/new-owner",
          this.jieshu
        )
        .then((res) => {
          if (res.data.Code > 0) {
            alert("修改成功");
            this.dialogFormVisible1 = false;
          } else {
            alert("修改失败");
            this.dialogFormVisible1 = false;
          }
        });
    },
    //关闭时刷新
    quxiao() {
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      this.showNewow();
    },
    //添加数据
    addpust() {
      this.$router.push("/NewOwnerContract");
    },
    //批量删除
    deleteMores() {
      if (this.ids.length === 0) {
        alert("请选择数据");
        return;
      }
      if (confirm("是否确定删除")) {
        this.$axios
          .delete(
            "https://localhost:44399/api/app/new-owner-app/delet-emore-new-owner/" +
              this.ids.toString()
          )
          .then((res) => {
            if (res.data.Code > 0) {
              alert("删除成功");
              this.showNewow();
            } else {
              alert("删除失败");
            }
          });
      }
    },
  },
  created() {
    this.showNewow();
    this.xianlu();
  },
};
</script>

<style>
</style>